<template>
    <div class="login-container">
        <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm" 
        label-position="left" label-width="0px" class="card-box login-form">
        <div class="login-left">
          <p class="sys-title">经销商管理系统<span class="company"></span></p>
          <!-- <p class="company">苏州橘子网络科技股份有限公司<span>V1.0.0</span></p> -->
        </div>
        <div class="login-right">
                <p class="login-label">用户登录</p>
                 <div class="inforBox">{{loginErrorInfor}}
                       </div>
                <el-form-item prop="username">
                    <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" @change="changeUserName"
                              placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" @change="changePassword"
                              autoComplete="on" placeholder="请输入密码"></el-input>
                </el-form-item>
              <el-form-item>
                <el-checkbox v-model="loginForm.rUname">记住用户名</el-checkbox>
                <el-checkbox v-model="loginForm.rPass" class="rPass">记住密码</el-checkbox>
                <div class="login-btn">
                    <el-button type="primary" :loading="loading" @click.native.prevent="handleLogin">
                    登录
                </el-button>
                </div>
               
              </el-form-item>
        </div>
        </el-form>
        <el-dialog title="第三方验证" :visible.sync="showDialog">
            邮箱登录成功,请选择第三方验证
            <socialSign></socialSign>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import socialSign from './socialsignin';
export default {
    components: { socialSign },
    name: 'login',
    data() {
     
        const validateName = (rule, value, callback) => {
            if (!value) {
                callback(new Error('请输入用户名'));
            } else {
                callback();
            }
        };
        return {
            loginErrorInfor: '', // 登录失败的提示
            // activeName: 'teacher',
            loginForm: {
                username: '',
                password: '',
                rUname: true,
                rPass: false
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', validator: validateName }],
                password: [
                   { required: true, trigger: 'blur', message: '请输入密码' },
                   { min: 6, max: 16, message: '密码长度为6到16个字符', trigger: 'blur' },
                   { pattern: /^[A-Za-z0-9]*$/, message: '您的密码错误', trigger: 'blur'}// 数字和字母组合
                ]
            },
            loading: false,
            showDialog: false
        };
    },
  
    computed: {
        ...mapGetters(['authType', 'avatar', 'agentUsername', 'agentPassword'])
    },
    created() {
        this.loginStatus(this.loginForm);
    },
    methods: {
        changeUserName() {
            this.loginErrorInfor=null;// // 登录失败的提示
        },
        changePassword() {
            this.loginErrorInfor=null;// // 登录失败的提示
        },
       // 根据有无cookie，到达勾选的状态
        loginStatus(loginForm) {
            this.loginForm.username=this.agentUsername?this.agentUsername:'';
            this.loginForm.password=this.agentPassword?this.agentPassword:'';
            this.loginForm.rUname=this.agentUsername?true:false;
            this.loginForm.rPass=this.agentPassword?true:false;
        },
        handleClick(...args) {
            console.log('args', args);
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store.dispatch('LoginByUsername', this.loginForm)
                    .then(() => {
                        this.loading = false;
                        this.loginErrorInfor=''; // 登录失败的提示
                        let userInfor={
                            username: this.loginForm.username,
                            password: this.loginForm.password,
                            isRemberAccount: this.loginForm.rUname,
                            isRemberPassword: this.loginForm.rPass
                        }
                        this.$store.dispatch('SetUserName', userInfor);// 记
                        this.$router.push({ path: '/' });
                    })
                    .catch(e => {
                        this.loading = false;
                        if (e.length > 100) { 
                            e ='';
                        }
                        this.loginErrorInfor=e; // 登录失败的提示
                    });
                } else {
                    return false;
                }
            });
        }
      
    }
  
};
</script>



<style rel="stylesheet/scss" lang="scss">
@import "src/styles/var.scss";
@import "src/styles/mixin.scss";
 .inforBox{
    display: inline-block;
    color: #ff5e2c;
    font-size: 14px;
    height: 30px;
    line-height: 38px;
    width:320px;
    overflow: hidden;/*超出部分隐藏*/
    white-space: nowrap;/*不换行*/
    text-overflow:ellipsis;/*超出部分文字以...显示*/
    }
.tips {
  font-size: 14px;
  color: #fff;
  margin-bottom: 5px;
}
.login-container {
  @include relative;
  height: 100vh;
  background: url(../../images/login/bg.png) no-repeat 100% 100%;
  background-size: 100% 100%;

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
    -webkit-text-fill-color: #333 !important;
  }
  input {
    background: transparent;
    -webkit-appearance: none;
    border-radius: 0px;
    height: 32px;
    margin-top: 22px;
    // 2017-12-11 by cuihdg
    border:1px solid #ccc; // 登陆样式修改
    box-shadow:none; // 去除边框投影
    -webkit-box-shadow:none;
    &:focus{
      border:1px solid $primary; // 添加选中边框样式
    }
  }
  .el-input {
    display: inline-block;
    width: 100%;
  }
  .login-form {
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
    width: 800px;
    height: 504px;
    .login-left {
      background: url(../../images/login/login.png) no-repeat 100% 100%;
      color: #fff;
      .sys-title {
        height: 38px;
        line-height: 38px;
        font-size: 36px;
        text-align: center;
        font-weight: 700;
        margin-top: 217px;
      }
        .company {
        font-size: 18px;
        color: #fff;
        text-align: center;
        height: 20px;
        line-height: 20px;
        padding-left: 10px;
        position: relative;
        bottom:-4px;
      }
    }
    .login-left,
    .login-right {
      width: 400px;
      height: 100%;
      // display: inline-block;
      float: left;
    }
    .login-right {
      padding: 80px 40px;
      .login-label {
        height: 32px;
        font-size: 27px;
        line-height: 32px;
        color: #333;
        // margin-bottom:20px;
      }
      .login-btn {
        text-align: center;
      }
      .rPass {
        float: right;
      }
    }
  }
  .el-form-item {
    color: #454545;
    .el-form-item__error {
      margin-top: 8px;
    }
    .el-button {
      width: 100%;
      margin-top: 30px;
    }
  }
  .el-tabs {
    width: 100%;
    .el-tabs__header {
      border: none;
    }
    .el-tabs__content {
      > .el-form-item {
        border: none;
      }
    }
  }
  .el-tabs__nav {
    display: flex;
    width: 100%;
    background: #ddd;
    .el-tabs__active-bar {
      height: 100%;
      background: #fff;
    }
    .el-tabs__item {
      flex: 1;
      font-size: 18px;
      height: 48px;
      line-height: 48px;
      z-index: 99;
      text-align: center;
      &.is-active {
        color: $primary;
      }
    }
  }
}
</style>
